<template>
	<div class style="width:100%;height:100%;padding: 15px;position:relative;">
		<div id="acontainer" style="width:100%;height:100%;"></div>
		<!--收费站-->
		<div class="popdiv" :style="popsty" v-if="tollshowpop">
			<el-row>
				<el-col :span="12">{{devdetail.name}}</el-col>
				<el-col :span="12" style="text-align:right;">
					<span style="color: #2FD7A4;">{{devdetail.status}}</span>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">所属高速&nbsp;&nbsp;&nbsp;&nbsp;{{devdetail.below}}</el-col>
				<el-col :span="12" style="text-align:right;">接入车道&nbsp;&nbsp;&nbsp;&nbsp;{{devdetail.linenum}}个</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					CPU状态&nbsp;&nbsp;&nbsp;&nbsp;
					<span style="color: #2FD7A4;">{{devdetail.CPU}}</span>
				</el-col>
				<el-col :span="0"></el-col>
			</el-row>
		</div>
		<!--etc门架-->
		<div class="popdiv" :style="popsty" v-if="etcshowpop">
			<el-row>
				<el-col :span="12">{{devdetail.name}}</el-col>
				<el-col :span="12" style="text-align:right;">
					<span style="color: #2FD7A4;">{{devdetail.status}}</span>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">所属高速&nbsp;&nbsp;&nbsp;&nbsp;{{devdetail.below}}</el-col>
				<el-col :span="12" style="text-align:right;">桩号&nbsp;&nbsp;&nbsp;&nbsp;{{devdetail.pino}}</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					网络状态&nbsp;&nbsp;&nbsp;&nbsp;
					<span style="color: #2FD7A4;">{{devdetail.net}}</span>
				</el-col>
				<el-col :span="0"></el-col>
			</el-row>
		</div>
		<!--机房-->
		<div>
			<el-dialog title="机房详情" :visible.sync="isshowdia" center width="62.5%" @close="isshowdia = false">
				<room v-if="isshowdia"/>
				<span slot="footer">
          <el-button @click="isshowdia = false">取 消</el-button>
          <el-button type="primary" @click="isshowdia = false">确 定</el-button>
        </span>
			</el-dialog>

		</div>

	</div>
</template>
<script>
	import position from "../json/tollposition.js";
	import AMap from "AMap";
	import etcposition from "../json/position.js";
	import serviceposition from "../json/serverposition.js";
	import room from '@/views/common/3droom'

	export default {
		components: {
			room
		},
		data() {
			return {
				amap: {},
				devdetail: {
					name: "加载中...",
					status: "在线",
					below: "渝蓉高速",
					net: "在线",
					pino: "ZK10+20"
				},
				tollshowpop: false,
				etcshowpop: false,
				popsty: "",
				isshowdia: false,
			};
		},
		computed: {},
		watch: {},
		mounted() {
			this.initdata();
		},
		methods: {
			initdata() {
				let _this = this;

				let amap = new AMap.Map("acontainer", {
					pitch: 55, // 地图俯仰角度，有效范围 0 度- 83 度
					viewMode: "3D", // 地图模式
					center: [105.007434, 29.993748],
					zoom: 11
				});

				this.amap = amap;

				amap.on('click', function(ev) {
					console.log(ev);
					_this.tollshowpop = false;
					_this.etcshowpop = false;
				})
				amap.on('mapmove', function(ev) {
					_this.tollshowpop = false;
					_this.etcshowpop = false;
//					_this.etcshowpop=false;
				})

				amap.setMapStyle("amap://styles/bd1436e18624470e8df880b1f5733142");

				let iconon = "/icon/tollGate1.png";
				let iconetc = "/icon/etc.png";
				let iconservice = "/icon/servers.png";
				//收费站
				position.map(item => {
					item.devlist.map(tunnelitem => {
						var marker = new AMap.Marker({
							position: new AMap.LngLat(
								tunnelitem.position[0],
								tunnelitem.position[1]
							),
							offset: new AMap.Pixel(-10, -50),
							icon: iconon, // 添加 Icon 图标 URL
							title: tunnelitem.name
						});
						marker.tunnelitem = tunnelitem;
						marker.on("click", this.tollmarkerclick.bind(tunnelitem));
						marker.on("mouseover", function() {
							// _this.$message.success(tunnelitem.name);
						});
						amap.add(marker);
					});
				});
				//etc门架
				etcposition.map(item => {
					item.devlist.map(tunnelitem => {
						var marker = new AMap.Marker({
							position: new AMap.LngLat(
								tunnelitem.position[0],
								tunnelitem.position[1]
							),
							offset: new AMap.Pixel(-10, -10),
							icon:  iconetc, // 添加 Icon 图标 URL
							title: tunnelitem.name
						});
						marker.tunnelitem = tunnelitem;
						marker.on("click", this.etcmarkerclick.bind(tunnelitem));
						marker.on("mouseover", function() {
							// _this.$message.success(tunnelitem.name);
						});
						amap.add(marker);
					});
				});

				//机房
				serviceposition.map(item => {
					item.devlist.map(tunnelitem => {
						var marker = new AMap.Marker({
							position: new AMap.LngLat(
								tunnelitem.position[0],
								tunnelitem.position[1]
							),
							offset: new AMap.Pixel(20, 20),
							icon: iconservice, // 添加 Icon 图标 URL
							// icon: Math.random() > 0.5 ? iconon : iconoff, // 添加 Icon 图标 URL
							title: tunnelitem.name
						});
						marker.tunnelitem = tunnelitem;
						marker.on("click", this.servicemarkerclick.bind(tunnelitem));
						marker.on("mouseover", function() {
							// _this.$message.success(tunnelitem.name);
						});
						amap.add(marker);
					});
				});

			},
			tollmarkerclick(e) {
				let x,y
        if (e.pixel.x > 600) {
          x = e.pixel.x - 300
        }else{
          x = e.pixel.x + 40
        }
				this.popsty =
					"top:" + (e.pixel.y - 50) + "px;left:" + (x) + "px;";
				this.devdetail.name = e.target.tunnelitem.name;
				this.devdetail.linenum = e.target.tunnelitem.linenum;
				this.devdetail.CPU = e.target.tunnelitem.CPU;
				this.tollshowpop = false;
				this.etcshowpop = false;
				this.$nextTick(function() {
					this.tollshowpop = true;
				});
			},
			etcmarkerclick(e) {
        let x,y
        if (e.pixel.x > 600) {
          x = e.pixel.x - 300
        }else{
          x = e.pixel.x + 40
        }
				this.popsty =
					"top:" + (e.pixel.y - 50) + "px;left:" + (x) + "px;";
				this.devdetail.name = e.target.tunnelitem.name;
				this.etcshowpop = false;
				this.tollshowpop = false;
				this.$nextTick(function() {
					this.etcshowpop = true;
				});
			},
			servicemarkerclick(e) {
        this.$store.state.app.roomname = e.target.tunnelitem.name;
				this.isshowdia = true
			},
			initmap() {},
			initdev() {}
		}
	};
</script>
<style lang='scss'>
	.popdiv {
		font-size: 15px;
		background-color: #2a3b81;
		padding: 10px;
		color: white;
		position: absolute;
		width: 300px;
		height: 100px;
		z-index: 100;
		.el-row {
			margin: 10px 0;
		}
	}
	
	.amap-logo {
		display: none !important;
		opacity: 0 !important;
	}
	
	.amap-copyright {
		display: none !important;
		opacity: 0 !important;
	}
	
	.BMap_cpyCtrl {
		display: none;
	}
	
	.anchorBL {
		display: none;
	}
</style>